<template>
  <div class="container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="商品信息" name="first">
        <div class='app-row m-20-t'>
          <span class="title bold width-100 align-right">商品名称:</span>
          <el-input class='flex-1' v-model="name_value"></el-input>
        </div>
        <div class="m-20-t">
          <div class='app-row'>
            <span class="title bold width-100 align-right">关键词:</span>
            <el-input class='flex-1'></el-input>
          </div>
          <div class='annotation m-10-t m-114-l'>
            <span>每个关键词最长为15个字符，必须以","(逗号)分隔符</span>
          </div>
        </div>
        <div class='app-row m-30-t'>
          <span class="title bold width-100 align-right">所属商户:</span>
          <el-select class='flex-1' v-model="orz_value" placeholder="请选择机构"></el-select>
        </div>
        <el-button type="primary" class="m-114-l m-10-t">添加机构</el-button>
        <div class='app-row m-30-t'>
          <span class="title bold width-100 align-right">所属分类:</span>
          <el-button icon="el-icon-menu" type="success" @click="setting_classify">设置分类</el-button>
          <el-button icon="el-icon-plus" type="warning">添加新分类</el-button>
        </div>
        <div class="m-50-t">
          <div class='app-row'>
            <span class="title bold width-100 align-right">是否上架:</span>
            <el-radio v-model="putaway_radio" label="1">是</el-radio>     
            <el-radio v-model="putaway_radio" label="2">否</el-radio>     
          </div>
          <div class='annotation m-10-t m-114-l'>
            <span>只有上架的商品才会在前台显示出来，客户是无法看到下架商品</span>
          </div>
        </div>
        <div class="m-50-t">
          <div class='app-row'>
            <span class="title bold width-100 align-right">是否共享:</span>
            <el-radio v-model="share_radio" label="1">是</el-radio>     
            <el-radio v-model="share_radio" label="2">否</el-radio>     
          </div>
          <div class='annotation m-10-t m-114-l'>
            <span>商城平台的商品可以被商家复制共享</span>
          </div>
        </div>
        <div class="m-50-t">
          <div class='app-row'>
            <span class="title bold width-100 align-right">是否免运费:</span>
            <el-radio v-model="freight_radio" label="1">是</el-radio>     
            <el-radio v-model="freight_radio" label="2">否</el-radio>     
          </div>
          <div class='annotation m-10-t m-114-l'>
            <span>是否免运费</span>
          </div>
        </div>
        <div class='flex m-50-t'>
          <span class="title bold width-100 align-right">附属数据:</span>
          <el-row :gutter="20" class="flex-1">
            <el-col :span="6">
              <div style="margin-left: 15px;">购买成功增加积分</div>
              <el-input class="m-20-t" v-model="score_value"></el-input>
            </el-col>
            <el-col :span="6">
              <div style="margin-left: 15px;">排序</div>
              <el-input class="m-20-t" v-model="sort_value"></el-input>
            </el-col>
            <el-col :span="6">
              <div style="margin-left: 15px;">计件单位显示</div>
              <el-input class="m-20-t" v-model="unit_value"></el-input>
            </el-col>
            <el-col :span="6">
              <div style="margin-left: 15px;">购买成功增加经验值</div>
              <el-input class="m-20-t" v-model="exp_value"></el-input>
            </el-col>
          </el-row>
        </div>
        <div class='flex m-50-t'>
          <span class="title bold width-100 align-right">基本数据:</span>
          <el-row class="flex-1">
            <el-col :span="5">
              <div style="margin-left: 15px;">商品编号</div>
              <el-input class="m-20-t" v-model="num_value" style="width: 150px"></el-input>
            </el-col>
            <el-col :span="3">
              <div style="margin-left: 15px;">库存</div>
              <el-input class="m-20-t" v-model="storage_value"  style="width: 100px"></el-input>
            </el-col>
            <el-col :span="4">
              <div style="margin-left: 15px;">市场价格</div>
              <el-input class="m-20-t" v-model="market_value"  style="width: 150px"></el-input>
            </el-col>
            <el-col :span="6">
              <div style="margin-left: 15px;">销售价格</div>
              <el-input class="m-20-t" v-model="sale_value"  style="width: 150px"></el-input>
              <el-button type="danger" icon='el-icon-user' class="m-10-l">会员价格</el-button>
            </el-col>
            <el-col :span="3">
              <div style="margin-left: 15px;">成本价格</div>
              <el-input class="m-20-t" v-model="cost_value"  style="width: 150px"></el-input>
            </el-col>
          </el-row>
        </div>
        <div class='app-row m-30-t'>
          <span class="title bold width-100 align-right">商品模型:</span>
          <el-select class='flex-1' v-model="orz_value" placeholder="请选择模型"></el-select>
        </div>
        <div class='annotation m-10-t m-114-l'>
          <span>可以加入商品扩展属性，比如：型号，年代，款式..</span>
        </div>
        <div class='app-row m-50-t'>
          <span class="title bold width-100 align-right">商品推荐:</span>
          <el-checkbox-group v-model="recommend_list">
            <el-checkbox label="最新商品"></el-checkbox>
            <el-checkbox label="特价商品"></el-checkbox>
            <el-checkbox label="热卖商品 "></el-checkbox>
            <el-checkbox label="推荐商品" ></el-checkbox>
          </el-checkbox-group>   
        </div>
        <div class='app-row m-30-t'>
          <span class="title bold width-100 align-right">商品品牌:</span>
          <el-select class='flex-1' v-model="orz_value" placeholder="请选择品牌"></el-select>
        </div>
        <div class='app-row m-30-t'>
          <span class="title bold width-100 align-right">商品相册:</span>
          <el-upload
            class="upload-demo"
            :action="save_file_url"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="file_list"
            :on-success="get_img_id"
            list-type="picture"
            drag>
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </div>
      </el-tab-pane>
      <el-tab-pane label="描述" name="second">
        <div class='app-row m-30-t'>
          <span class="title bold align-right width-150 ">商品详情文字:</span>
          <el-input type="textarea" class='m-50-l flex-1' :rows="4" placeholder="请输入内容" v-model="text_detail"></el-input>
        </div>
        <!-- <div class="m-50-t">
          <el-row>
            <el-col :span="18" :offset='3'>
              <editor id="editor_id" height="500px" width="100%" :content.sync="editorText"
                  :afterChange="afterChange()"
                  :loadStyleMode="false"
                  @on-content-change="onContentChange">
              </editor>
            </el-col>
          </el-row>
        </div> -->
        <div class='app-row m-30-t'>
          <span class="title bold align-right width-150">商品详情图片:</span>
          <el-upload
            class="upload-demo m-50-l"
            :action="save_file_url_detail"
            :on-preview="handlePreview_detail"
            :on-remove="handleRemove_detail"
            :file-list="file_list_detail"
            :on-success="get_img_id_detail"
            name="imgFile"
            list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
          </el-upload>
        </div>
      </el-tab-pane>
      <el-tab-pane label="营销选项" name="third">
        <div class='app-row m-20-t'>
          <span class="title bold width-100 align-right">SEO关键词:</span>
          <el-input class='flex-1'></el-input>
        </div>
        <div class='app-row m-20-t'>
          <span class="title bold width-100 align-right">SEO描述:</span>
          <el-input class='flex-1' type="textarea" :rows='2'></el-input>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div class="app-row j-c-c m-100-t">
      <el-button type="success" @click="add_button">添加商品</el-button>
    </div>
    <el-dialog
      title="选择分类"
      :visible.sync="dialog_visible"
      width="50%"
      >
      <div class='category-container' >
        <div  @click="changing_category" 
              v-for='(item) in goods_category_list' 
              :key='item.index' class="category-item" 
              :data-id="item.id"
              :class="[chosen_category_id.indexOf(item.id) >= 0 ?'chosen-category-item':'']">
          {{item.name}} 
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog_visible = false">取 消</el-button>
        <el-button type="primary" @click="dialog_visible = false">确 定</el-button>
      </span>
    </el-dialog>
    <div style="height: 500px"></div>
  </div>
</template>

<script>
  import goods_category_request from "@/api/goods_category_request"
  import goods_request from "@/api/goods_request"
  import host_one from "@/api/host/host"
  // import tinymce from 'tinymce/tinymce'
  // import 'tinymce/themes/modern/theme'
  // import editor from '@tinymce/tinymce-vue'
  export default {
    name: 'goods_add',
    data() {
      return {
        dialog_visible: false,
        text_detail: '',
        file_list: [],
        goods_category_list: [],
        activeName: 'first',
        name_value: "",
        current_size: 10,
        current_page: 1,
        key_word: '',
        putaway_radio: '1',
        share_radio: '2',
        freight_radio: '2',
        score_value: 0,
        num_value: "",
        storage_value: 100,
        market_value: '',
        sale_value: '',
        cost_value: '',
        orz_value: '',
        sort_value: 99,
        unit_value: "堂",
        exp_value: 0,
        chosen_category_id: [],
        // nacessary_data: false,
        recommend_list: [],
        editorText: '', // 双向同步的变量
        editorTextCopy: '',  // content-change 事件回掉改变的对象,
        save_file_url: '',
        img_id_list: [],
        img_id_list_detail: [],
        goods_content: ''
      };
    },
    components: {
      editor
    },
    created() {
      this.get_goods_category()
      this.save_file_url = host_one + '/savefile'
      this.save_file_url_detail = host_one + '/uploadfile'
    },
    mounted() {
  
    },
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      get_img_id(res,file,file_list) {
        this.img_id_list = file_list
        
      },
      get_img_id_detail(res,file,file_list_detail) {
        this.img_id_list_detail = file_list_detail
        console.log(file_list_detail);
      },
      setting_classify() {
        this.dialog_visible = true
      },
      get_goods_category() {
        this.listLoading = true,
        goods_category_request.goods_category_list({pageSize: this.current_size, page: this.current_page, name: this.keyword}, res=> {
          this.listLoading = false,
          this.goods_category_list = res.data
        })
      },
      handleClick(tab, event) {
      },
      onContentChange (val) {
        this.editorTextCopy = val;
      },
      afterChange () {
      },
      changing_category(e){
        let id = Number(e.target.dataset.id)
        let chosen_category_id = this.chosen_category_id
        let index_id = chosen_category_id.indexOf(id)
        if (index_id>=0) {
          chosen_category_id.splice(index_id, 1)
        }
        else {
          chosen_category_id.push(id)
        }
      },
      add_button() {
        if (this.name_value == '') {
          this.$message.error("请输入商品名称")
          return
        }
        if (this.market_value == '') {
          this.$message.error("请输入商品市场价格")
          return
        }
        if (this.sale_value == '') {
          this.$message.error("请输入商品销售价格")
          return
        }
        // if (this.num_value == '') {
        //   this.$message.error("请输入商品编号")
        //   return
        // }
        // if (this.sale_value == '') {
        //   this.$message.error("请输入销售价格")
        //   return
        // }
        let photo_list =[] 
        for (let i of this.img_id_list) {
          photo_list.push(i.response.data.id)
        }
        let params = {
          name: this.name_value,
          // goods_no: this.num_value,
          // model_id: 0,
          sell_price: this.sale_value,
          market_price: this.market_value,
          photo: photo_list,
          category: this.chosen_category_id,
          goods_content: this.img_id_list_detail[0]?this.img_id_list_detail[0].response.data.url:''
        }
        goods_request.add_goods(params, res=> {
          this.$router.push('/academic/goods')
        })
      },
      // notice_message() { 
      //   this.$message.error()
      // },
    }
  }
</script>

<style scoped>
@import "~@/styles/layout.scss";
  .category-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 300px;

  }

  .category-item {
     margin-top: 30px;
     width: 200px;
     margin-left: 30px;
     border: 1px solid rgb(199, 199, 199);
     text-align:center;
     padding: 10px 10px;
     /* display: flex;
     flex-direction: row; */
  }

  .category-item:hover {
    background-color: yellow;
    cursor: pointer;
  }

  .chosen-category-item {
    background-color: yellow;
  }
</style>